<template>
  <n-config-provider id="body w-full"
                     :theme-overrides="naiveTheme"
                     style="min-width: 1100px"
  >
    <module-header name="app" value="/display/group" is-telescreen />

    <main-content>
      <!-- 第一个搜索框：标签名称 -->
      <input v-model="tagNameSearch"
             type="text"
             placeholder="标签名称"
             class="mr-2 p-2 border border-gray-300"
             @input="searchTags"
      >

      <!-- 第二个搜索框：标签类型 -->
      <input v-model="tagTypeSearch"
             type="text"
             placeholder="标签类型"
             class="mr-2 p-2 border border-gray-300"
             @input="searchTags"
      >

      <!-- 确认搜索按钮 -->
      <button class="p-2 bg-green-500 text-white" @click="confirmSearch">
        确认搜索
      </button>

      <!-- 创建标签按钮 -->
      <button class="p-2 bg-blue-500 text-white" @click="openCreateTagModal">
        创建标签
      </button>

      <!-- 创建标签的弹窗 -->
      <div v-if="isCreateTagModalOpen"
           class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"
      >
        <div class="bg-white p-8">
          <h2 class="text-lg font-bold mb-4">创建标签</h2>

          <form>
            <div class="mb-4">
              <label for="tagName">标签名称：</label>
              <input id="tagName"
                     v-model="tagInfo.name"
                     type="text"
                     required
                     class="p-2 border border-gray-300"
              >
            </div>

            <div class="mb-4">
              <label for="tagType">标签类型：</label>
              <select id="tagType"
                      v-model="tagInfo.type"
                      class="p-2 border border-gray-300"
              >
                <option value="数值">数值</option>
                <option value="字符串">字符串</option>
              </select>
            </div>

            <div class="mb-4">
              <label for="tagCoverage">标签覆盖人数：</label>
              <input id="tagCoverage"
                     v-model="tagInfo.coverage"
                     type="text"
                     class="p-2 border border-gray-300"
              >
            </div>

            <div class="mb-4">
              <label for="tagValue">标签值：</label>
              <input id="tagValue"
                     v-model="tagInfo.value"
                     type="text"
                     class="p-2 border border-gray-300"
              >
            </div>

            <div class="mb-4">
              <label for="tagUpdateMethod">更新方式：</label>
              <input id="tagUpdateMethod"
                     v-model="tagInfo.updateMethod"
                     type="text"
                     class="p-2 border border-gray-300"
              >
            </div>

            <div class="mb-4">
              <label for="tagStatus">标签状态：</label>
              <input id="tagStatus"
                     v-model="tagInfo.status"
                     type="text"
                     class="p-2 border border-gray-300"
              >
            </div>

            <div class="mb-4">
              <label for="tagCreator">创建人：</label>
              <input id="tagCreator"
                     v-model="tagInfo.creator"
                     type="text"
                     class="p-2 border border-gray-300"
              >
            </div>

            <div class="mb-4">
              <label for="tagCreationTime">创建时间：</label>
              <input id="tagCreationTime"
                     v-model="tagInfo.creationTime"
                     type="text"
                     class="p-2 border border-gray-300"
              >
            </div>
          </form>
          <button class="p-2 bg-gray-300 text-black mr-2"
                  @click="closeCreateTagModal"
          >
            取消创建
          </button>
          <button class="p-2 bg-blue-500 text-white" @click="confirmCreateTag">
            确认创建
          </button>
        </div>
      </div>

      <!-- 显示用户创建的标签列表 -->
      <div v-if="filteredTags.length > 0">
        <table class="min-w-full">
          <thead>
            <tr>
              <th>标签名称</th>
              <th>标签类型</th>
              <th>标签覆盖人数</th>
              <th>标签值</th>
              <th>更新方式</th>
              <th>标签状态</th>
              <th>创建人</th>
              <th>创建时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="tag in filteredTags"
                :key="tag.id"
                :class="{
                  'font-bold text-blue-500':
                    isMatched(tag.name) || isMatched(tag.type),
                }"
            >
              <td>{{ tag.name }}</td>
              <td>{{ tag.type }}</td>
              <td>{{ tag.coverage }}</td>
              <td>{{ tag.value }}</td>
              <td>{{ tag.updateMethod }}</td>
              <td>{{ tag.status }}</td>
              <td>{{ tag.creator }}</td>
              <td>{{ tag.creationTime }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </main-content>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NConfigProvider } from 'naive-ui'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'

const tagNameSearch = ref('')
const tagTypeSearch = ref('')
const tagCoverageSearch = ref('')
const tagValueSearch = ref('')
const tagUpdateMethodSearch = ref('')
const tagStatusSearch = ref('')
const tagCreatorSearch = ref('')
const tagCreationTimeSearch = ref('')

const tags = ref([])
const isCreateTagModalOpen = ref(false)
const tagInfo = ref({
  name: '',
  type: '',
  coverage: '',
  value: '',
  updateMethod: '',
  status: '',
  creator: '',
  creationTime: '',
})
const filteredTags = ref([])

const openCreateTagModal = () => {
  isCreateTagModalOpen.value = true
}

const closeCreateTagModal = () => {
  isCreateTagModalOpen.value = false
}

const confirmCreateTag = () => {
  const newTag = {
    name: tagInfo.value.name,
    type: tagInfo.value.type,
    coverage: tagInfo.value.coverage,
    value: tagInfo.value.value,
    updateMethod: tagInfo.value.updateMethod,
    status: tagInfo.value.status,
    creator: tagInfo.value.creator,
    creationTime: tagInfo.value.creationTime,
    // 添加列 如果想在最右边新增“操作”的话，就在这加
  }

  tags.value.push(newTag)

  // 清空tagInfo
  tagInfo.value = {
    name: '',
    type: '',
    coverage: '',
    value: '',
    updateMethod: '',
    status: '',
    creator: '',
    creationTime: '',
  }

  // 重新计算 filteredTags
  searchTags()

  closeCreateTagModal()
}

const searchTags = () => {
  const tagNameFilter = tagNameSearch.value.toLowerCase()
  const tagTypeFilter = tagTypeSearch.value.toLowerCase()

  filteredTags.value = tags.value.filter((tag) => {
    const nameMatch = tag.name.toLowerCase().includes(tagNameFilter)
    const typeMatch = tag.type.toLowerCase().includes(tagTypeFilter)
    // 添加其他属性的过滤条件
    const coverageMatch = tag.coverage
      .toLowerCase()
      .includes(tagCoverageSearch.value.toLowerCase())
    const valueMatch = tag.value
      .toLowerCase()
      .includes(tagValueSearch.value.toLowerCase())
    const updateMethodMatch = tag.updateMethod
      .toLowerCase()
      .includes(tagUpdateMethodSearch.value.toLowerCase())
    const statusMatch = tag.status
      .toLowerCase()
      .includes(tagStatusSearch.value.toLowerCase())
    const creatorMatch = tag.creator
      .toLowerCase()
      .includes(tagCreatorSearch.value.toLowerCase())
    const creationTimeMatch = tag.creationTime
      .toLowerCase()
      .includes(tagCreationTimeSearch.value.toLowerCase())

    return (
      nameMatch &&
      typeMatch &&
      coverageMatch &&
      valueMatch &&
      updateMethodMatch &&
      statusMatch &&
      creatorMatch &&
      creationTimeMatch
    )
  })
}

onMounted(() => {
  // 在这里加载标签数据，例如从服务器请求标签列表
  // 然后将数据赋值给tags和filteredTags
})

const isMatched = (value) => {
  const searchValue = tagNameSearch.value.toLowerCase()
  return value.toLowerCase().includes(searchValue)
}

const confirmSearch = () => {
  const confirmMessage = '是否确认查询？'

  // 这个提示框写废了 ==================
  if (confirm(confirmMessage)) {
    // 用户点击确认，进行搜索并显示结果
    searchTags()
  } else {
    // 用户点击取消，不进行任何操作
  }
}

</script>

<style>
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
</style>